<template>
  <el-row style="height:calc(100% - 65px)">
    <el-col :span="3" style="background-color:rgb(84, 92, 100)">
      <el-menu :router="true" default-active="2" active-text-color="#ffd04b" background-color="#545c64"
        class="el-menu-vertical-demo" :collapse="isCollapse" text-color="#fff" @open="handleOpen" @close="handleClose">
        <!-- <el-sub-menu index="1">
          <template #title>
            <el-icon>
              <Setting />
            </el-icon>
            <span>网站管理</span>
          </template>
          <el-menu-item index="1-1">校徽管理</el-menu-item>
          <el-menu-item index="1-2">banner管理</el-menu-item>
        </el-sub-menu> -->
        <el-sub-menu index="2">
          <template #title>
            <el-icon>
              <User />
            </el-icon>
            <span>用户管理</span>
          </template>
          <el-menu-item index="2-1" route="/user">所有用户</el-menu-item>
          <!-- <el-menu-item index="2-2" route="/user">导入用户</el-menu-item> -->
          <!-- <el-menu-item index="1-1"></el-menu-item> -->
        </el-sub-menu>
        <el-sub-menu index="3">
          <template #title>
            <el-icon>
              <Operation />
            </el-icon>
            <span>权限管理</span>
          </template>
          <el-menu-item index="3-1" v-if="this.$store.state.area.collegeName=='全国'">学校站点管理员分配</el-menu-item>
          <el-menu-item index="3-2" v-if="this.$store.state.area.collegeName!='全国'" route="/group">班主任分配</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="4">
          <template #title>
            <el-icon>
              <Edit />
            </el-icon>
            <span>申请管理</span>
          </template>
          <el-menu-item index="4-1" route="/appeal">用户加入申请</el-menu-item>
        </el-sub-menu>
        <!-- <el-sub-menu index="5">
          <template #title>
            <el-icon>
              <location />
            </el-icon>
            <span>地区管理</span>
          </template>
        </el-sub-menu> -->
      </el-menu> 
      <!-- <div style="font-size:14px;color:white;text-align:center"><el-icon><Switch /></el-icon> &nbsp;收起</div> -->
    </el-col>
    <el-col :span="21">
      <router-view />
    </el-col>
  </el-row>
</template>

<script>
export default {
  data() {
    return {
      isCollapse: false,
    };
  },
  methods: {
    handleOpen() {
      // console.log(key, keyPath)
    },
    handleClose() {
      // console.log(key, keyPath)
    },
  },
};
</script>

<style>

</style>